<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>世界日志</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.0.min.js"></script>
    <style>
        body{
            background-color: black;
        }
        div{
            margin: 10px;
            width: 45%;
            height: 750px;
            float: left;
            font-size: 20px;
            font-family: "楷体";
            font-weight: bold;
            margin-top: 20px;
            overflow: auto;
        }
        #normal{
            margin-left: 3%;
            background-color: cornsilk;
            color: black;
        }
        #die{
            margin-left: 5%;
            background-color: gray;
            color: black;
        }
        h1{
            text-align: center;
            height: 30px;
            font-size: 65px;
        }
        #title{
            font-size: 60px;
            color: cornsilk;
            font-family: "楷体";
            height: 30px;
            margin-top: 0px;
        }
    </style>
</head>
<body>
<h1 id="title">世界日志</h1>
<div id="normal">
    <h1>正在发生的事</h1>
</div>
<div id="die">
    <h1>死亡记录</h1>
</div>
</body>
<script>
    var normal = new EventSource('http://localhost:8080/normal/open?type=normal');
    normal.onmessage = function (event) {
        html = document.getElementById('normal').innerHTML;
        html += '<br><br>&nbsp;&nbsp;&nbsp;' + event.data;
        document.getElementById('normal').innerHTML = html;
        var ele = document.getElementById('normal');
        ele.scrollTop = ele.scrollHeight;
    };

    var die = new EventSource('http://localhost:8080/die/open?type=die');
    die.onmessage = function (event) {
        html = document.getElementById('die').innerHTML;
        html += '<br><br>&nbsp;&nbsp;&nbsp;' + event.data;
        document.getElementById('die').innerHTML = html;
        var ele = document.getElementById('die');
        ele.scrollTop = ele.scrollHeight;
    };
</script>
</html>